<template>
  <div v-loading="loading">
    <!-- 头部卡片 -->
    <el-row class="head-card" :gutter="25">
      <el-col :span="6"
        ><el-card style="background-color: #2f4056">
          <div>文章统计</div>
          <div>{{ initIndexData.articleCount }}</div>
          <div>
            <i class="el-icon-chat-dot-round"></i>
            {{ initIndexData.increasedArticles }}
          </div>
          <div>30天内新增文章</div>
        </el-card></el-col
      >
      <el-col :span="6"
        ><el-card style="background-color: #1e9fff">
          <div>浏览统计</div>
          <div>{{ initIndexData.viewCount }}</div>
          <div>
            <i class="el-icon-chat-dot-round"></i
            >{{ initIndexData.increasedViews }}
          </div>
          <div>30天内新增浏览</div>
        </el-card></el-col
      >
      <el-col :span="6"
        ><el-card style="background-color: #009688">
          <div>留言统计</div>
          <div>{{ initIndexData.messageCount }}</div>
          <div>
            <i class="el-icon-chat-dot-round"></i
            >{{ initIndexData.increasedMessages }}
          </div>
          <div>30天内新增留言</div>
        </el-card></el-col
      >
      <el-col :span="6"
        ><el-card style="background-color: #ffb800">
          <div>评论统计</div>
          <div>{{ initIndexData.commentCount }}</div>
          <div>
            <i class="el-icon-chat-dot-round"></i
            >{{ initIndexData.increasedComments }}
          </div>
          <div>30天内新增评论</div>
        </el-card></el-col
      >
    </el-row>
    <!-- 下方数据 -->
    <el-row :gutter="20" class="row-center">
      <el-col :span="16" style="padding-left: 0; padding-right: 0">
        <el-row :gutter="20">
          <el-col :span="12"
            ><el-card>
              <div slot="header">数据统计</div>
              <div class="data-statistics">
                <div class="data-statistics-item">
                  <el-card shadow="never">
                    <div>用户统计</div>
                    <div>{{ initIndexData.userCount }}</div>
                    <div>当前分类总记录数</div>
                  </el-card>
                </div>
                <div class="data-statistics-item">
                  <el-card shadow="never">
                    <div>访客统计</div>
                    <div>{{ initIndexData.visitorCount }}</div>
                    <div>当前分类总记录数</div>
                  </el-card>
                </div>
                <div class="data-statistics-item">
                  <el-card shadow="never">
                    <div>分类统计</div>
                    <div>{{ initIndexData.categoryCount }}</div>
                    <div>当前分类总记录数</div>
                  </el-card>
                </div>
                <div class="data-statistics-item">
                  <el-card shadow="never">
                    <div>标签统计</div>
                    <div>{{ initIndexData.tagCount }}</div>
                    <div>当前分类总记录数</div>
                  </el-card>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header">快捷入口</div>
              <div class="quick-entry">
                <div
                  class="quick-entry-card"
                  @click="quicklyEnter('addArticle')"
                >
                  <el-card shadow="never">
                    <i class="el-icon-edit"></i>
                  </el-card>
                  <span> 文章发布 </span>
                </div>

                <div class="quick-entry-card" @click="quicklyEnter('article')">
                  <el-card shadow="never">
                    <i class="el-icon-notebook-1"></i>
                  </el-card>
                  <span> 文章管理 </span>
                </div>
                <div class="quick-entry-card" @click="quicklyEnter('comment')">
                  <el-card shadow="never">
                    <i class="el-icon-chat-dot-round"></i>
                  </el-card>
                  <span> 评论管理 </span>
                </div>
                <div
                  class="quick-entry-card"
                  @click="quicklyEnter('leaveMessage')"
                >
                  <el-card shadow="never">
                    <i class="el-icon-chat-line-square"></i>
                  </el-card>
                  <span> 留言管理 </span>
                </div>
                <div class="quick-entry-card" @click="quicklyEnter('user')">
                  <el-card shadow="never">
                    <i class="el-icon-s-custom"></i>
                  </el-card>
                  <span> 用户管理 </span>
                </div>
                <div class="quick-entry-card" @click="quicklyEnter('role')">
                  <el-card shadow="never">
                    <i class="el-icon-s-custom"></i>
                  </el-card>
                  <span> 角色管理</span>
                </div>
                <div class="quick-entry-card" @click="quicklyEnter('notice')">
                  <el-card shadow="never">
                    <i class="el-icon-s-claim"></i>
                  </el-card>
                  <span> 公告管理</span>
                </div>
                <div class="quick-entry-card" @click="quicklyEnter('link')">
                  <el-card shadow="never">
                    <i class="el-icon-link"></i>
                  </el-card>
                  <span> 友链管理 </span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row class="tabs">
          <el-col>
            <el-tabs
              type="border-card"
              v-model="activeTabName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="访问日志" name="first">
                <el-table
                  :data="initIndexData.accessLogs"
                  style="width: 100%"
                  border
                >
                  <el-table-column
                    align="center"
                    prop="requestIp"
                    label="IP"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="address" label="IP来源">
                  </el-table-column>
                  <el-table-column align="center" label="时间">
                    <template slot-scope="scope">
                      {{ scope.row.createTime | formatDate }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="description"
                    label="描述"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="status"
                    label="访问状态"
                  >
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.status == 1">成功</el-tag>
                      <el-tag type="danger" v-else>失败</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="操作日志" name="second">
                <el-table
                  :data="initIndexData.operationLogs"
                  style="width: 100%"
                  border
                >
                  <el-table-column
                    align="center"
                    prop="requestIp"
                    label="IP"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="address" label="IP来源">
                  </el-table-column>
                  <el-table-column align="center" label="时间">
                    <template slot-scope="scope">
                      {{ scope.row.createTime | formatDate }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="username"
                    label="操作人员"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="description"
                    label="描述"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="status"
                    label="访问状态"
                  >
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.status == 1">成功</el-tag>
                      <el-tag type="danger" v-else>失败</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="最新评论" name="third">
                <el-table
                  :data="initIndexData.comments"
                  style="width: 100%"
                  border
                >
                  <el-table-column
                    align="center"
                    prop="nickname"
                    label="昵称"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="content" label="内容">
                  </el-table-column>
                  <el-table-column align="center" label="时间">
                    <template slot-scope="scope">
                      {{ scope.row.createTime | formatDate }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="文章链接">
                    <template slot-scope="scope">
                      <el-link
                        type="primary"
                        :href="url + scope.row.id"
                        target="_blank"
                      >
                        {{ 'article/' + scope.row.id }}</el-link
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="最新留言" name="fourth">
                <el-table
                  :data="initIndexData.messages"
                  style="width: 100%"
                  border
                >
                  <el-table-column
                    align="center"
                    prop="nickname"
                    label="昵称"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="content" label="内容">
                  </el-table-column>
                  <el-table-column align="center" label="时间">
                    <template slot-scope="scope">
                      {{ scope.row.createTime | formatDate }}
                    </template>
                  </el-table-column>
                </el-table></el-tab-pane
              >
            </el-tabs>
          </el-col>

          <el-col class="chart">
            <el-card>
              <div slot="header">报表统计</div>
              <div>
                <div
                  id="myChart"
                  :style="{ width: '100%', height: '600px' }"
                ></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">系统公告</div>
          <div>
            <!-- 系统公告列表 -->
            <div
              class="notice"
              v-for="item in initIndexData.notices"
              :key="item.id"
              @click="showNotice(item)"
            >
              <span> {{ item.title }}</span>
              <span class="time"> {{ item.createTime }}</span>
            </div>
          </div>
        </el-card>

        <el-card class="new-rticle">
          <div slot="header">
            <i class="iconfont icon-weixuanzhongyuanquan"></i> 最新文章
          </div>
          <div>
            <el-timeline>
              <el-timeline-item
                v-for="item in initIndexData.articles"
                :key="item.id"
                :timestamp="item.createTime | formatDate1"
                placement="top"
                size="large"
                icon="iconfont icon-weixuanzhongyuanquan"
              >
                <div>
                  <el-link type="primary" :href="url + item.id" target="_blank">
                    {{ item.title }}</el-link
                  >
                  <p>{{ item.summary }}</p>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹出对话框 -->
    <el-dialog
      :title="'系统公告' + '  ' + noticesData.createTime"
      :visible.sync="isDialogVisible"
      width="30%"
      center
    >
      <div>{{ noticesData.title }}</div>
      <div>{{ noticesData.content }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { indexData } from '../api/api'

import moment from 'moment'
import 'moment/locale/zh-cn'

export default {
  created() {
    var a = this.$route.params

    this.getIndexData()
  },

  mounted() {},
  data() {
    return {
      url: 'http://vegetablebird.top/article/',
      initIndexData: {},
      isDialogVisible: false,
      noticesData: {},
      activeTabName: 'first',
      loading: true,

      option: {
        title: {
          text: '流量统计表'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['最近7天前台流量', '最近7天后台流量']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: {
          type: 'value',
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        series: [
          {
            name: '最近7天前台流量',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          },
          {
            name: '最近7天后台流量',
            data: [24, 13, 0, 0, 1, 3, 5, 1],
            type: 'line',
            smooth: true
          }
        ]
      }
    }
  },
  methods: {
    getIndexData() {
      indexData().then((res) => {
        this.initIndexData = res
        this.getXdata()
        this.$nextTick(() => {
          console.log(this.option)
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(
            document.getElementById('myChart'),
            'walden'
          )
          // 绘制图表
          myChart.setOption(this.option)

          // echarts 窗口缩放自适应
          window.onresize = function () {
            echartsRecords.resize()
          }

          this.loading = false
        })
      })
    },
    showNotice(val) {
      this.noticesData = val

      this.isDialogVisible = true
    },
    handleClick() {
      console.log(this.activeTabName)
    },
    quicklyEnter(val) {
      this.$router.push(val)
    },
    getXdata() {
      let fViews = this.filterViewData(this.initIndexData.frontViews)
      let bViews = this.filterViewData(this.initIndexData.backViews)

      this.option.xAxis.data = fViews.last7Dates
      this.option.series[0].data = fViews.content
      this.option.series[1].data = bViews.content

      console.log(this.option)
    },

    //获取最近7天
    getLast7Dates() {
      let start = moment().startOf('day').subtract(7, 'days')
      let dates = []
      for (let i = 0; i <= 7; i++) {
        let date = start.format('YYYY-MM-DD')
        dates.push(date)
        start = start.add(1, 'days')
      }
      return dates
    },

    //格式化日期，处理后台返回的数据
    filterViewData(viewData) {
      let last7Dates = this.getLast7Dates()
      let dates = viewData.map((item) => item.date)
      let result = []

      last7Dates.forEach((item) => {
        let count = 0
        //匹配是否有相同的日期
        let i = dates.indexOf(item)

        if (i != -1) {
          count = viewData[i].viewCount
        }

        result.push(count)
      })

      return {
        last7Dates: last7Dates,
        content: result
      }
    }
  }
}
</script>

<style lang="less" scoped>
.head-card {
  width: 97%;
  margin: 0 auto !important;
  margin-top: 15px !important;

  .el-card {
    color: #fff;
    border: none;
    font-size: 15px;
    line-height: 24px;

    div:nth-child(2) {
      font-size: 30px;
    }
  }
}

.row-center {
  width: 97%;
  margin: 0 auto !important;
  margin-top: 15px !important;
}

.data-statistics {
  display: flex;
  flex-wrap: wrap;

  .data-statistics-item {
    width: 50%;
    height: 113px;
  }

  .el-card {
    border: none;
    margin: 3px;
    background-color: #f8f8f8;

    div:first-child {
      font-size: 13px;
    }

    div:last-child {
      font-size: 13px;
    }

    div:nth-child(2) {
      font-size: 25px;
    }
  }
}

.quick-entry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  height: 226px;

  .quick-entry-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .el-card {
    border: none;
    margin: 3px;
    background-color: #f8f8f8;
    width: 113px;

    cursor: pointer; //鼠标悬浮变小手

    /deep/.el-card__body {
      text-align: center;
    }

    i {
      font-size: 20px;
    }
  }
}

.notice {
  height: 40px;
  line-height: 40px;
  cursor: pointer; //鼠标悬浮变小手

  padding-left: 10px;

  .time {
    position: absolute;
    right: 37px;
  }
}

.notice:hover {
  background-color: #f6f6f6;
}

/deep/.el-dialog {
  margin-top: 30vh !important;
}

.tabs {
  margin-top: 10px;
  .el-col {
    padding: 0 10px;
  }
}

.chart {
  margin-top: 10px;
  margin-bottom: 10px;
  .el-col {
    padding: 0 10px;
  }
}

.new-rticle {
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-timeline {
  padding: 0;
}

/deep/.el-timeline-item__timestamp.is-top {
  padding-top: 2px;
}

/deep/.el-timeline-item__timestamp {
  color: #333;
  line-height: 1;
  font-size: 18px;
}

/deep/.el-timeline-item__icon {
  color: #000;
  font-size: 20px;
}

/deep/.el-timeline-item__node {
  position: absolute;
  background-color: #e4e7ed00;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/.el-timeline-item__tail {
  position: absolute;
  left: 4px;
  top: 27px;
  height: 70%;
  border-left: 2px solid #e4e7ed;
}
</style>
